<template>
    <div class="editUser">
        <div class="editUserLeft">
            <el-icon>
                <Tickets />
            </el-icon>
            <span>数据列表</span>
        </div>
        <div class="editUserRight">
            <el-button type="primary" @click="router.push('addMenu')">添加</el-button>
        </div>
    </div>
    <el-table :data="menuList" style="width: 100%" border table-layout="auto" cell-class-name="align-c">
        <el-table-column prop="id" label="编号" />
        <el-table-column prop="title" label="菜单名称" />
        <el-table-column prop="level" label="菜单技术">
            <template #default="{ row }">
                <span>{{ row.level === 0 ? "一级" : "二级" }}</span>
            </template>
        </el-table-column>
        <el-table-column prop="name" label="前端名称" />
        <el-table-column #default="{ row }" label="前端图标">
            <span class="iconfont" :class="row.icon"></span>
        </el-table-column>
        <el-table-column #default="{ row }" label="是否显示">
            <el-switch v-model="row.hidden" :active-value="0" :inactive-value="1" @change="switchHidden(row)" />
        </el-table-column>
        <el-table-column prop="sort" label="排序" />
        <el-table-column label="操作">
            <template #default="{ row }">
                <el-button text :type="isDisabled === false ? 'primary' : ''" @click="checkSecondLevelMenu(row.id)"
                    :disabled="isDisabled">查看下级</el-button>
            </template>
        </el-table-column>
        <el-table-column label="操作">
            <template #default="{ row }">
                <el-button text type="primary" @click="router.push('addMenu?id=' + row.id)">编辑</el-button>
            </template>
        </el-table-column>
    </el-table>
    <div class="page">
        <ElConfigProvider :locale="zhCn">
            <el-pagination v-model:current-page="queryParams.pageNum" v-model:page-size="queryParams.pageSize"
                :page-sizes="[10, 20, 50, 100]" background layout="total, sizes, prev, pager, next, jumper"
                :total="total" @size-change="queryUserList(parentId, queryParams)"
                @current-change="queryUserList(parentId, queryParams)" />
        </ElConfigProvider>
    </div>
</template>
<script setup lang='ts'>
import { ref, reactive } from "vue";
import { getUmsMenuInfoAPI, menuUpdateHidden } from "./api";
import { Tickets } from '@element-plus/icons-vue'
import { ElConfigProvider, ElMessage } from 'element-plus'
import zhCn from 'element-plus/lib/locale/lang/zh-cn'
import { useRouter } from "vue-router"
const router = useRouter()
const menuList = ref<IMenuListModel[]>([])

const parentId = ref<number>(0)

const isDisabled = ref<boolean>(false)
const queryParams = reactive<IUserListParams>({
    pageNum: 1,
    pageSize: 10
})
const total = ref(0)

const queryUserList = (id: number, params: IUserListParams) => {
    getUmsMenuInfoAPI(id, params).then((res) => {
        if (res.code === 200) {
            console.log(res);
            menuList.value = res.data.list
            total.value = res.data.total

        }
    })
}
queryUserList(parentId.value, queryParams)
getUmsMenuInfoAPI(parentId.value, queryParams).then((res) => {
    if (res.code === 200) {
        console.log(res);
        menuList.value = res.data.list
        total.value = res.data.total

    }
})

// 是否显示的切换
const switchHidden = (row: IMenuListModel) => {
    menuUpdateHidden(row.id!, row.hidden).then(res => {
        if (res.code === 200) {
            ElMessage.success("切换成功")
        } else {
            row.hidden = row.hidden === 1 ? 0 : 1
        }
    }).catch(() => {
        row.hidden = row.hidden === 1 ? 0 : 1
    })
}

//查看二级菜单
const checkSecondLevelMenu = (id: number) => {
    queryUserList(id, queryParams)
    parentId.value = id
    isDisabled.value = true

}
</script>
<style lang="less" scoped>
:deep(.align-c) {
    .cell {
        text-align: center !important;
    }
}

.editUser {
    display: flex;
    justify-content: space-between;
    box-shadow: 0 0 4px 2px #ccc;
    border-radius: 5px;
    padding: 20px;
    margin-bottom: 20px;
    align-items: center;
}

.page {
    padding: 20px;
    display: flex;
    justify-content: flex-end;
}
</style>